import React,{ useRef } from 'react'
import Hello from './components/Hello'

export default function LayOut() {
  const pEle = useRef(null)
  const helloEle = useRef(null)
  function getP() {
    console.log("pEle:", pEle.current)
    console.log("pEle:", pEle.current.value)
  }

  function getHello() {
    console.log("Hello: ", helloEle)
    console.log("Hello: ", helloEle.current)
    console.log("Hello: ", helloEle.current.add())
  }
  return (
    <div>
        LayOut
        {/* 元素的 获取 */}
        <button onClick={getP}> 获取P </button>
        {/* <div ref={pEle}> 222 </div> */}
        <input ref={pEle}  />

        {/* 组件的 获取 */}
        <hr />
        <button onClick={getHello} > 组件的获取 </button>
        {/* ref 不能绑定函数组件 */}
        <Hello ref={helloEle} />
    </div>
  )
}
